<template>
    <div class="qrcodeContent">
        <div class="qrcodeText">
            <van-field
                v-model="qrcodeValue"
                rows="5"
                autosize
                label=""
                type="textarea"
                maxlength="1000"
                placeholder="输入内容生成二维码"
                show-word-limit
                clearable
            />
        </div>
        <div class="qrcodeBtn">
            <van-button
                style="width: 100%;background: #15256a;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;"
                :class="{ active: isActive }"
                @click="createQrcode"
            >
                开始生成
            </van-button>
        </div>
        <div class="qrcode" v-if="value.value != ''">
            <vue-qrcode
                :value="value"
                :options="{ margin: 5, width: 250, colorDark: '#000', colorLight: '#FFF', correctLevel: 'H' }"
                :width="250"
                :color="{dark: '#000000',light:'#FFFFFF'}"
                type='image/png'
            >
            </vue-qrcode>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import VueQrcode from 'vue-qrcode'

const route = useRoute()
const router = useRouter()

const qrcodeValue = ref<any>('');
const value = ref<any>('')
const isActive = ref<boolean>(false)

const createQrcode = () => {
    handleClick()
    if (qrcodeValue.value == '') {
        showToast('请输入先内容')
        return
    }
    value.value = qrcodeValue.value;
}

const handleClick = () => {
    isActive.value = !isActive.value
    setTimeout(() => {
        isActive.value = !isActive.value
    }, 100)
}

onMounted(() => {

})

</script>


<style lang="scss" scoped>
.qrcodeContent {
    width: 100%;
    position: relative;
    padding: 15px;
    .qrcodeText {
        width: 100%;
        height: auto;
    }
    .qrcodeBtn {
        margin: 20px 0;
        .active {
            // background-color: blue; /* 改变背景颜色 */
            transform: scale(1.1); /* 放大按钮 */
        }
    }
    .qrcode {
        margin-top: 20px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>